<template>
	<view class="container">
		<scroll-view scroll-y="true">
			<view class="taskList">
				<view class="taskList-left">
					<u-image :showLoading="true" src="/static/AIImg.jpg" width="220rpx" height="220rpx"
						radius="30rpx"></u-image>
				</view>
				<view class="taskList-right">
					<view class="project-name">
						文字内容合集
					</view>
					<view class="project-study">
						<view style="margin-right: 10rpx;">
							学习进度:
						</view>
						<u-line-progress :percentage="20" height="20" activeColor="#6ad797"></u-line-progress>
					</view>
					<view class="">
						截至完成时间：2025-11-11 11:11
					</view>
					<view class="project-button">
						<u-button type="primary" size="small" text="开始学习" class="auto-width-btn"
							@click="openDetail(1)"></u-button>

					</view>
				</view>
			</view>
			<view class="taskList">
				<view class="taskList-left">
					<u-image :showLoading="true" src="/static/AIImg.jpg" width="220rpx" height="220rpx"
						radius="30rpx"></u-image>
				</view>
				<view class="taskList-right">
					<view class="project-name">
						视频课程合集
					</view>
					<view class="project-study">
						<view style="margin-right: 10rpx;">
							学习进度:
						</view>
						<u-line-progress :percentage="20" height="20" activeColor="#6ad797"></u-line-progress>
					</view>
					<view class="">
						截至完成时间：2025-11-11 11:11
					</view>
					<view class="project-button">
						<u-button type="primary" size="small" text="开始学习" class="auto-width-btn"
							@click="openDetail(2)"></u-button>

					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			openDetail(taskId) {
				uni.navigateTo({
					url: `/homeNav/xxtd/components/studyListDetail?Id=${taskId}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #f5f7fa;
		// height: 100vh;
	}

	.taskList {
		width: 100%;
		background: white;
		display: flex;
		// padding: 30rpx;
		margin-top: 30rpx;
	}

	.taskList-left {
		display: inline-block;
		padding: 25rpx;
	}

	.taskList-right {
		flex: 1;
		padding: 25rpx;
		padding-left: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.project-name {
		font-size: 32rpx;
		font-weight: 800;
		color: #262626;
		display: block;
	}

	.project-study {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}

	.project-button {
		margin-top: 10rpx;
	}

	.auto-width-btn {
		width: auto !important;
		min-width: 120rpx;
		display: inline-flex !important;
		padding: 0 30rpx !important;
		white-space: nowrap;
	}
</style>